<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点图</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_687521_0gk51ugz5a74.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{margin:0;padding:0}
        ul,li{
            list-style: none;
        }
        .treeList{
            /*width: 500px;*/
            margin: 30px auto;
        }
        li{padding:5px;padding-left: 15px;}
        .iconfont{
            color: #18bc9c;
            font-size: 16px;
        }
        .shows{display: none;}
        .searchs{
            display: inline-block;
            width: 50px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border: 1px solid #18bc9c;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="searchRes">
    <input class="res" type="text" placeholder="请输入账号进行查询">
    <span class="searchs">查询</span>
</div>
<div class="treeList">
    <ul class="treeS">
    </ul>
</div>
<script>
    window.onload=function(){
        // if ($(this).next().children().length === 0) {
        var account ={$one};
        var str1 = '';
        $.ajax({
            type: "POST",
            url: "/admin/member/usertree/index",
            data: {account: account,one:0},
            async:false,
            dataType: "json",
            success: function(data){
                if (data.code === 1){
                    var lists1 = data.data.child;
                    if (lists1.length > 0) {
                        for(var i=0;i<lists1.length;i++) {
                            if(lists1[i].level=='Level 1'){
                                var levels='普通用户';
                            }else if(lists1[i].level=='Level 2'){
                                var levels='会员';
                            }else if(lists1[i].level=='Level 3'){
                                var levels='超级会员';
                            }else{
                                var levels='体验会员';
                            }
                            str1+=`
                                <li class="list">
                                  <i class="iconfont icon-sanjiaoxing hides"></i>
                                  <i class="iconfont icon-sanjiaoxing-copy shows"></i>
                                  <span class="textS" data-account="`+lists1[i].mobile+`">账号:`+lists1[i].mobile+`,真实姓名:`+lists1[i].truename+` ,直推人数:`+lists1[i].user_num+` , 团队人数: `+lists1[i].team_count+`, 用户等级: `+levels+`</span>
                                  <ul class="treeS"></ul>
                                </li>
                                    `
                        }
                    } else {
                        alert('没有下级');
                        return false;
                    }
                    console.log($(this));
                }
            }
        })
        $('.treeS').html(str1);
        $('.hides').hide();
        $('.shows').show();
        // } else {
        //     $(this).next().html('');
        //     $(this).siblings('.hides').show();
        //     $(this).siblings('.shows').hide();
        // }
    }
    $(document).on('click', ".textS", function(){
        if ($(this).next().children().length === 0) {
            var account = $(this).data('account');
            var str1 = '';
            $.ajax({
                type: "POST",
                url: "/admin/member/usertree/index",
                data: {account: account},
                async:false,
                dataType: "json",
                success: function(data){
                    if (data.code === 1){
                        var lists1 = data.data.child;
                        if (lists1.length > 0) {
                            for(var i=0;i<lists1.length;i++) {
                                if(lists1[i].level=='Level 1'){
                                    var levels='普通用户';
                                }else if(lists1[i].level=='Level 2'){
                                    var levels='会员';
                                }else if(lists1[i].level=='Level 3'){
                                    var levels='超级会员';
                                }else{
                                    var levels='体验会员';
                                }
                                str1+=`
                                <li class="list">
                                  <i class="iconfont icon-sanjiaoxing hides"></i>
                                  <i class="iconfont icon-sanjiaoxing-copy shows"></i>
                                  <span class="textS" data-account="`+lists1[i].mobile+`">账号:`+lists1[i].mobile+`,真实姓名:`+lists1[i].truename+` ,直推人数:`+lists1[i].user_num+` , 团队人数: `+lists1[i].team_count+`, 用户等级: `+levels+`</span>
                                  <ul class="treeS"></ul>
                                </li>`
                            }
                        } else {
                            alert('没有下级');
                            return false;
                        }
                        console.log($(this));
                    }
                }
            })
            $(this).siblings('.treeS').html(str1);
            $(this).siblings('.hides').hide();
            $(this).siblings('.shows').show();
        } else {
            $(this).next().html('');
            $(this).siblings('.hides').show();
            $(this).siblings('.shows').hide();
        }
    })
    // /admin/tree/index/index   param:acount admin/member/Usertree/index
    function getData(account){
        $.ajax({
            type: "POST",
            url: "/admin/member/usertree/index",
            data: {account: account,one:1},
            dataType: "json",
            success: function(data){
                if (data.code === 1){
                    var lists = data.data.child;
                    var str = '';
                    if (lists.length > 0) {
                        for(var i=0;i<lists.length;i++) {
                            if(lists[i].level=='Level 1'){
                                var levelsa='普通用户';
                            }else if(lists[i].level=='Level 2'){
                                var levelsa='会员';
                            }else if(lists[i].level=='Level 3'){
                                var levelsa='超级会员';
                            }else{
                                var levelsa='体验会员';
                            }
                            str+=`
                            <li class="list">
                              <i class="iconfont icon-sanjiaoxing hides"></i>
                              <i class="iconfont icon-sanjiaoxing-copy shows"></i>
                              <span class="textS" data-account="`+lists[i].mobile+`">账号:`+lists[i].mobile+`, 真实姓名:`+lists[i].truename+`  , 直推人数:`+lists[i].user_num+`  , 团队人数: `+lists[i].team_count+`, 用户等级: `+levelsa+`</span>
                              <ul class="treeS"></ul>
                            </li>`
                        }
                    } else {
                        alert('没有下级');
                        return false;
                    }
                    $('.treeS').html(str);
                }
            }
        })
    }
    $('.searchs').click(function () {
        var value = $('.res').val();
        getData(value);
    })
</script>
</body>
</html>